<template>
  <div class="mainWrapper">
        <div class="cmt-info">
                <img src="http://157.122.54.189:9095/assets/images/avatar.jpg" alt="">{{commentData.account.nickname}}
                <i>{{date}}</i>
          
                <div class="btnReply" @click="handleClick(commentData.id)">回复</div>
        </div>

        <PostParent
            v-if="commentData.parent"
            :parentData="commentData.parent"
        />

        <div class="content">{{commentData.content}}</div>

        <img 
            class="photos"
            :src="$axios.defaults.baseURL + item.url" alt="" 
            v-for="(item,index) in commentData.pics"
            :key="index">
  </div>
</template>

<script>
import {eventBus} from '@/utils/eventBus'
import moment from "moment"

export default {
    props: ['commentData'],
    mounted(){
        console.log(this.commentData);
    },
    data() {
        return {
            
        }
    },
    methods:{
        handleClick(nickname){
            console.log(nickname);
            eventBus.$emit('sendReply',nickname)
        }
    },
    computed: {
        date() {
            return moment(this.commentData.updated_at).format  ('YYYY-MM-DD hh:mm')
        }
    },
   

}
</script>

<style lang="less" scoped>
.mainWrapper {
    border-bottom: 1px dashed #ddd;
    padding: 20px 20px 20px;
    font-size: 16px;
    position: relative;
    
    .cmt-info {
        font-size: 14px;
        color: #666;
        margin-bottom: 10px;
        img {
            width: 16px;
            height: 16px;
            border-radius: 50%;
        }

        .btnReply {
            position: absolute;
            right: 22px;
            bottom: 6px;
        }
        .btnReply:hover {
            color: #1e50a2;
            text-decoration: underline;
        }        
    }

    .photos {
            width: 80px;
            height: 80px;
            object-fit: cover;
            margin: 5px;
            border: 1px dashed #ccc;
            border-radius: 20px;
            padding: 5px;
    }
}
</style>